<style scoped>
.box {
    color: red;
    font-size: 20px;
}

.active{
    color: blue;
    font-size: 40px;
}
</style>

<template>
    <button @click="isActive = !isActive">切换</button>
    <div :class="{active:isActive}">
        this is a box
    </div>
    <div :class="[isActive?'active':'box']">
        this is a box
    </div>
</template>

<script lang="ts" setup>

import {ref} from 'vue';

const isActive = ref(true);

</script>